<template>
    <div class="container">
        <div id="main" class="chart"></div>
        <select v-model="localdata" class="province-select" @change="getdatabody">
            <option v-for="(value,index) in provinces" :key="index" :value="value">{{ value}}</option>
        </select>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import { toRefs, reactive } from 'vue';
import axios from 'axios';

export default {
    setup() {
        const state = reactive({
            data: [],
            selectedProvince: '',
            localdata: '平和质',
            provinces: [],
            bodydata: [],
        })
        getdata()
        function getdata() {
            axios.get('/api/tcmsampledata/local')
                .then(function (response) {
                    // 成功处理
                    const result = response.data;
                    if (result.code === 200) {
                        state.data = result.data;
                    }
                    console.log("Data:", state.data); // 添加调试信息
                })
                .catch(function (error) {
                    // 错误处理
                    console.log(error);
                })
                .finally(function () {
                    // 总是执行
                });
        }
        getdatabody()
        function getdatabody() {
            axios.get('/api/tcmsampledata/body', {
                params: {
                    body: state.localdata
                }
            })
                .then(function (response) {
                    const result = response.data;
                    if (result.code === 200) {
                        state.bodydata = result.data.tcmSampleDataVOList;
                        state.provinces = result.data.locallist || []; // 确保provinces有默认值
                        console.log("Provinces data:", state.provinces); // 添加调试信息
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
        return {
            ...toRefs(state),
            getdata,
            getdatabody
        }
    },


    name: 'ChinaMap',
    mounted() {
        this.initMap();
        this.getdatabody(); // 确保在组件挂载时获取数据
    },
    watch: {
        bodydata(newVal) {
            if (newVal && newVal.length > 0) {
                this.renderMap();
                this.renderPieCharts(); // 添加饼图重新渲染
            }
        },
        // 添加对selectedProvince的监听
        selectedProvince(newVal) {
            if (newVal) {
                this.filterDataByProvince(newVal);
            }
        }
    },
    methods: {
        initMap() {
            fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
                .then(response => response.json())
                .then(data => {
                    echarts.registerMap('china', data);
                    this.renderMap();
                    this.renderPieCharts(); // 新增饼图渲染
                });
        },

        renderPieCharts() {
            // 饼图1
            const pieChart1 = echarts.init(document.getElementById('pie-chart1'));
            const pieData1 = [
                { name: '男', value: 100 },
                { name: '女', value: 80 }
            ];
            pieChart1.setOption({
                title: {
                    text: '性别比例',
                    left: 'center',
                    textStyle: {
                        color: '#FFF'
                    }
                },
                series: [
                    {
                        type: 'pie',
                        radius: '50%',
                        data: pieData1
                    }
                ]
            });

            // 饼图2 - 按地理区域分组
            const pieChart2 = echarts.init(document.getElementById('pie-chart2'));
            
            // 定义地理区域
            const regions = {
                '东北': ['辽宁省', '吉林省', '黑龙江省'],
                '华北': ['北京市', '天津市', '河北省', '山西省', '内蒙古自治区'],
                '华东': ['上海市', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省'],
                '华南': ['广东省', '广西壮族自治区', '海南省'],
                '华中': ['河南省', '湖北省', '湖南省'],
                '西南': ['重庆市', '四川省', '贵州省', '云南省', '西藏自治区'],
                '西北': ['陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区']
            };

            // 计算每个区域的总人数
            const regionData = {};
            Object.keys(regions).forEach(region => {
                regionData[region] = 0;
                regions[region].forEach(province => {
                    const provinceData = this.bodydata.find(item => item.local === province);
                    if (provinceData) {
                        regionData[region] += provinceData.count;
                    }
                });
            });

            // 转换为饼图数据格式
            const pieData2 = Object.entries(regionData).map(([name, value]) => ({
                name,
                value
            }));

            pieChart2.setOption({
                title: {
                    text: '区域分布',
                    left: 'center',
                    textStyle: {
                        color: '#FFF'
                    }
                },
                series: [
                    {
                        type: 'pie',
                        radius: '50%',
                        data: pieData2,
                        label: {
                            formatter: '{b}: {c} ({d}%)',
                            color: '#FFF'
                        }
                    }
                ]
            });
        },
        //中国地图
        renderMap() {
            const chartDom = document.getElementById('main');
            if (!chartDom) {
                console.error("地图容器未找到");
                return;
            }

            // 销毁旧的 ECharts 实例
            if (this.myChart) {
                this.myChart.dispose();
            }

            // 初始化新的 ECharts 实例
            this.myChart = echarts.init(chartDom);

            // 检查 state.data 是否为空
            if (!this.data || this.data.length === 0) {
                console.error("地图数据为空");
                return;
            }

            // 将 state.data 转换为 ECharts 需要的格式
            const mapData = this.data.map(item => ({
                name: item.local,
                value: item.count
            }));

            const option = {
                title: {
                    text: '各体质在全国的分布情况',
                    left: 'center',
                    textStyle: {
                        color: '#FFF' // 设置标题颜色为红色
                    }
                },
                tooltip: {
                    trigger: 'item',
                    showDelay: 0,
                    transitionDuration: 0.2
                },
                visualMap: {
                    left: 'right',
                    min: 0,
                    max: Math.max(...this.bodydata.map(item => item.count)), // 动态设置最大值
                    inRange: {
                        color: ['#CEFF0B', '#FFEA0B', '#FF8D0B', '#F34D00', '#FC3F00','#FF0608']
                    },
                    text: ['高', '低'],
                    calculable: true
                },
                series: [
                    {
                        name: '中国省份',
                        type: 'map',
                        mapType: 'china',
                        roam: true,
                        label: {
                            show: false,

                            color: '#000',
                            fontSize: 12,
                            fontWeight: 'bold'
                        },
                        itemStyle: {
                            borderColor: 'rgba(0, 0, 0, 0.2)'
                        },
                        emphasis: {
                            label: {
                                show: true
                            },
                            itemStyle: {
                                areaColor: '#FFD700'
                            }
                        },
                        data: this.bodydata.map(item => ({
                            name: item.local,
                            value: item.count // 使用count值作为数据
                        }))
                    }
                ]
            };
            try {
                this.myChart.setOption(option);
            } catch (error) {
                console.error("地图渲染失败：", error);
            }
        },
    },

}
</script>

<style scoped>
.container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.chart {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

/* 修改select样式 */
.province-select {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 200px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    font-size: 14px;
}
</style>